<template>
  <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
             <div class="header_card">
                <span>销售额类别占比</span>
                <el-radio-group  size="mini" v-model="radio">
                    <el-radio-button label="全部渠道" ></el-radio-button>
                    <el-radio-button label="线上"></el-radio-button>
                    <el-radio-button label="门店"></el-radio-button>
                </el-radio-group>
             </div>
        </div>
        <div class="body_card" ref="body_card">
           
        </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {throttle} from 'lodash'
export default {
    name:'Search',
    data() {
        return {
            radio:'全部渠道'
        }
    },
    mounted() {
         let myChart = echarts.init(this.$refs.body_card);
         myChart.setOption({
             title:{
                 text:'搜索引擎',
                 subtext:'1048',
                 left:'center',
                 top:"42%"
             },
              tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                    // name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    // legendHoverLink:true,
                    avoidLabelOverlap: true,
                    label: { //饼图图形上的文本标签
                        show: true,
                        position: 'outside',
                        fontSize :12
                    },
                    emphasis: {//高亮状态的扇区和标签样式
                        label: {
                            show: true,
                            fontSize: '18',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {  //标签的视觉引导线配置
                        show: true,   //是否显示视觉引导线。
                    },
                    data: [
                        { value: 1048, name: '搜索引擎' },
                        { value: 735, name: '直接访问' },
                        { value: 580, name: '邮件营销' },
                        { value: 484, name: '联盟广告' },
                        { value: 300, name: '视频广告' }
                    ]
                    }
                ]
         }),
         myChart.on('mousemove',throttle(function(params){
                  myChart.setOption({
                  title:{
                    text:params.data.name,
                    subtext:params.data.value,
                    },
             })
            },300))
    }
}
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

     .header_card{
        display: flex;
        justify-content: space-between;
        align-items: center;
   }
   .body_card{
       height: 278px;
   }
</style>